<template>
  <view class="container">
    <mvBar :mysNavConfig="mysNavConfig" @onRightClick="onRight"></mvBar>
    <view class="fuel-info">
      <view class="station-title">
        <view class="station-img">
          <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/station-default.png" />
        </view>
        <view class="title-text">
          <p class="name">{{ stationInfo.stationName }}</p>
          <view class="tags">
            <view class="tag">加油可享免费洗车</view>
            <view class="tag">油站开票</view>
          </view>
        </view>
      </view>
      <view class="position-info" @click="gohere(stationInfo)">
        <view>
          <view class="road">
            {{ stationInfo.address }}
            <uni-icons type="right" size="13" color="#9D9D9D"></uni-icons>
          </view>
          <view class="station-distance">
            <view class="distance">
              距您{{ stationInfo.distance }}km
            </view>
          </view>
        </view>
        <view class="position-r">
          <view class="navigateIco">
            <uni-icons type="paperplane-filled" size="16" color="#FFFFFF"></uni-icons>
          </view>
          <p class="sub">导航</p>
        </view>
      </view>
    </view>
    <view class="price-panle">
      <view class="price">优惠价：<span class="vipPirce">￥<b class="num">{{lowest}}</b>/L起</span></view>
      <view class="fuel-price">
        <view class="member-price" v-for="(item, index) in stationInfo.prPriceList" :key="index">
          {{ item.prName }}  <span class="vipPirce">{{ item.price }}元</span>/L
        </view>
      </view>
    </view>
    <view class="fuel-pr-price">
      <view class="pr-list" @click="toggle('bottom')">
        <view class="item">
          选择油枪/油号
        </view>
<!--        <view class="item" v-if="currentNozInfo.nozNo">-->
<!--          {{ currentNozInfo.nozNo }}号枪 ; {{ currentNozInfo.price }}元/升-->
<!--        </view>-->
        <view class="roundOilNum">
          <b>{{currentNozInfo.prName.replace('#','')}}</b>
          <span class="little">#</span>
          <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/arrow.png" mode=""></image>
        </view>
<!--        <view class="item" v-else>-->
<!--          请选择-->
<!--          <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-right.png" mode=""></image>-->
<!--        </view>-->
      </view>
      <view class="main-noz">
        <view class="noz-list">
          <view class="item" :class="{'current_item': filterCurrentnozId == item.nozId}"
                v-for="item in filterNozList" :key="item.nozId" @click="chooseNoz(item)">
            <span class="fuelNo">{{ item.nozNo }}</span>号<span class="text-gray">/{{ item.prName }}</span>
          </view>
        </view>
      </view>
      <view class="order-info" v-if="isShow">
        <view class="title">
          <view>

          </view>
          应付金额
        </view>
        <view class="br">

        </view>
        <view class="meet-price shouldPay">
          <view>￥<span class="totalMoney">{{currentOrder.fuelAmt}}</span>元</view>
          <view class="meet">约{{currentOrder.vol}}L</view>
        </view>
      </view>
      <view class="payment-method" v-if="isShow">
        <view class="title">
          <view>
          </view>
          支付方式
        </view>
        <view class="br">

        </view>
        <view class="balance">
          <view class="balance-title">
            <image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/balance-new.png" mode=""></image>
            <text>余额</text>
          </view>
          <view class="balance-list">
            <evan-radio-group v-model="currentPayMethodsIndex"  @change="radioPayWay">
              <view class="uni-list-cell item" v-for="(item, index) in memberPayInfo"  @click="onVipPayClick(item,index)">
                <view class="item-name">{{ item.memberName }}:
                  <text
                      v-if="item.accAmt>=0">{{ item.accAmt }}元
                  </text>
                </view>
                <evan-radio
                    ref="listRadio"
                    :preventClick="true"
                    :icon="index === currentPayMethodsIndex && payType === 1 ? 'circle-filled' : 'circle'"
                    :disabled="!item.memberType || item.accAmt < currentOrder.fuelAmt || item.disable"
                    icon-size="18"
                    primary-color="#006241"
                >
                </evan-radio>
              </view>
            </evan-radio-group>

<!--            </radio-group>-->
            <view class="br">

            </view>
          </view>
          <view class="wechat-pay">
            <radio-group @change="radioUnmemberPayWay" style="width: 100%;">
              <view class="uni-list-cell wechat-pay-title" v-for="(item, index) in unmemberPayInfo"
                    :key="item.id"
                    @click="onUnMemberPayClick(item,index)"
              >
<!--              <label class="uni-list-cell wechat-pay-title" v-for="(item, index) in unmemberPayInfo"-->
<!--                     :key="item.id">-->
                <view style="display: flex;align-items: center;">
                  <image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/we-chat-new.png" mode=""></image>
                  <text>{{ item.payName }}</text>
                </view>
                <evan-radio
                    ref="weChatPayRef"
                    :preventClick="true"
                    :icon="index === currentUnmemberPayIndex ? 'circle-filled' : 'circle'"
                    icon-size="18"
                    primary-color="#006241"
                >
                </evan-radio>
<!--                <radio :value="item.id" :checked="index === currentUnmemberPayIndex"/>-->
<!--              </label>-->
              </view>
            </radio-group>
          </view>
        </view>
      </view>
      <view class="order-info" v-if="isShow">
        <view class="title">
          <view>
          </view>
          优惠券
        </view>
        <view class="br">

        </view>
        <view class="meet-price">
          <view class="meet">
            优惠券
          </view>
          <view class="price" style="display: flex;align-items: center;">
            {{ orderDiscountInfo.couponName || '暂无可用优惠券' }}
            <image style="width: 28rpx;height: 28rpx;" src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-right.png" mode="">
            </image>
          </view>
        </view>
      </view>
    </view>
    <view class="submit" v-if="isShow">
      <view>
        <view class="price">
          <text>实付：</text>
          <text>
            <text
                style="font-size: 44rpx; color: #006241;">{{ orderDiscountInfo.realAmt || '0.00' }}
            </text>
            元
          </text>
        </view>
        <view class="text-red discount" v-if="orderDiscountInfo.totalDiscAmt > 0" @click="onDiscountDetail">
          优惠¥{{orderDiscountInfo.totalDiscAmt}}
          <uni-icons type="down" size="12" color="#F57546" />
        </view>
      </view>
      <view class="button" :class="{'active_next_pay': orderDiscountInfo.realAmt>0}" @click="nextPaid()">
        立即支付
      </view>
    </view>
    <!-- 键盘 -->
    <AmountInput :IsShow="MykeywordShow" @Cancelword="Cancelword" @goNext="goNext" @setValue="mykeywordset">
    </AmountInput>
    <uni-popup ref="popup" type="bottom" borderRadius="24rpx 24rpx 0 0" background-color="#fff" :is-mask-click="false">
      <view class="popup-content">
        <view class="title">
          选择油枪号
          <view class="close" @click="close()">
            <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-close.png" mode=""></image>
          </view>
        </view>
        <view class="br">

        </view>
        <view class="item-title">
          油号
        </view>
        <view class="pr-list">
          <view class="item" :class="{'current_item': filterCurrentPrId == item.prId}"
                v-for="(item, index) in stationInfo.prPriceList" :key="index" @click='filterNoz(item)'>
            {{ item.prName }}
          </view>
        </view>
        <view class="item-title">
          枪号
        </view>
        <view class="noz">
          <view class="noz-list">
            <view class="item" :class="{'current_item': filterCurrentnozId == item.nozId}"
                  v-for="item in filterNozList" :key="item.nozId" @click="chooseNoz(item)">
              <span class="fuelNo">{{ item.nozNo }}</span>号<span class="text-gray">/{{ item.prName }}</span>
            </view>
          </view>
<!--          <view class="pr-submit" @click="submitPr()">-->
<!--            确定-->
<!--          </view>-->
        </view>
      </view>
    </uni-popup>
    <!-- 未支付订单列表popup -->
    <uni-popup ref="unPaidOrderPopup" type="bottom" borderRadius="24rpx 24rpx 0 0" background-color="#fff" :is-mask-click="false">
      <view class="order-content">
        <view class="title">
          确认枪号
          <view class="close" @click="$refs.unPaidOrderPopup.close()">
            <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-close.png" mode=""></image>
          </view>
        </view>
        <view class="order-list">
          <radio-group @change="radioUnPaidOrder">
            <label class="uni-list-cell" v-for="(item, index) in unpaidOrderList" :key="item.memberId"
                   :class="index === currentOrderIndex?'active':''">
              <view class="fuel-order-info">
                <view class="info">
                  {{ item.nozNo }}号枪/{{ item.prName }} <span class="text-red">{{ item.fuelAmt }}元</span>
                </view>
                <view class="date">
                  {{ item.createTime }}
                </view>
              </view>
              <view>
                <radio :value="item.orderId" color="#006241" :checked="index === currentOrderIndex"/>
              </view>
            </label>
          </radio-group>
          <view class="confirm_pay" @click="confirmOrder">
            <span>确认订单</span>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 优惠券popup -->
    <uni-popup ref="couponPopup" borderRadius="24rpx 24rpx 0 0" background-color="#fff" :is-mask-click="false">
      <view class="coupon-content">
        <view class="title">
          优惠券
          <view class="close" @click="$refs.couponPopup.close()">
            <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-close.png" mode=""></image>
          </view>
        </view>
        <view class="coupon-list">
          <view class="no-coupon">
            <label class="radio">
              <radio value=""/>
              <text>不使用优惠券</text>
            </label>
          </view>
          <radio-group @change="radioUnPaidOrder">
            <view class="list">
              <view class="coupon-left">
                <view class="price">
                  ￥
                  <text>300</text>
                </view>
                <view class="interval">
                  99-9999元可用
                </view>
              </view>
              <view class="br">

              </view>
              <label class="uni-list-cell">
                <view class="coupon-info">
                  <view class="name">
                    优惠券
                  </view>
                  <view class="date">
                    2023-12-10 至 2024-12-10
                  </view>
                  <view class="memo">
                    已满足可用条件
                  </view>
                </view>
                <view>
                  <radio :value="1"/>
                </view>
              </label>
            </view>
          </radio-group>
          <view class="confirm_coupon">
            <span>确认</span>
          </view>
        </view>
      </view>
    </uni-popup>
    <!--  优惠详情  -->
    <uni-popup ref="discountDetail" border-radius="24rpx 24rpx 0 0 " background-color="#fff">
      <view class="coupon">
        <view class="title">
          <view style="display: flex; justify-content: flex-start">
            <view class="left">
              <view>

              </view>
              优惠金额 /
            </view>
            <view class="right text-red">
              {{ orderDiscountInfo.totalDiscAmt || '0' }}元
            </view>
          </view>
          <view class="close" @click="$refs.discountDetail.close()">
            <image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-close.png" mode=""></image>
          </view>
        </view>
        <view class="br">

        </view>
        <view class="coupon-price-list">
          <view class="coupon-price">
            <view class="name">
              活动优惠
            </view>
            <view class="price" style="display: flex;align-items: center;">
              {{ orderDiscountInfo.activityDiscAmt || '暂无优惠' }} {{ orderDiscountInfo.activityDiscAmt ? '元' : '' }}
            </view>
          </view>
          <view class="coupon-price">
            <view class="name">
              优惠券优惠
            </view>
            <view class="price" style="display: flex;align-items: center;">
              {{ orderDiscountInfo.couponDiscAmt || '暂无优惠' }} {{ orderDiscountInfo.couponDiscAmt ? '元' : '' }}
            </view>
          </view>
          <view class="coupon-price">
            <view class="name">
              等级优惠
            </view>
            <view class="price" style="display: flex;align-items: center;">
              {{ orderDiscountInfo.gradeDiscAmt || '暂无优惠' }} {{ orderDiscountInfo.gradeDiscAmt ? '元' : '' }}
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <view class="bg-trans"></view>
  </view>
</template>

<script>
const Equ_List = ['ktv', 'ktv2'];
import AmountInput from '@/components/price-keyboard/price-keyboard.vue'
import mvBar from "@/components/mysNavBar";
import evanRadioGroup from "@/components/evan-radio-group/evan-radio-group.vue";
import evanRadio from "@/components/evan-radio/evan-radio.vue";

import {
  nextSnowflakeId
} from '@/utils/snowflake.js'
import {
  getFuelStationInfo,
  getLastFuelUnpaidOrder,
  getFuelOrderDisc,
  createMemberInfo,
  miniPay, getEmpCard
} from '@/api'
import weChatPay from '@/utils/charge-pre-pay.js'
import {
  toast
} from '@/utils/common';

export default {
  components: {
    AmountInput, mvBar, evanRadioGroup, evanRadio
  },
  data() {
    return {
      InputEvent: '',
      MykeywordShow: false,
      bottomHeight: '0rpx',
      lowest: null,
      stationInfo: {},
      currentNozInfo: {}, // 所选抢信息
      unpaidOrderList: [],
      currentOrder: {}, // 所选订单信息
      currentOrderIndex: 0, // 所选订单下标
      defaultMemberInfo: {}, // 默认的会员信息
      memberPayInfo: [], // 会员支付方式的支付及会员信息列表
      currentPayMethodsIndex: null, // 会员支付方式下标
      unmemberPayInfo: [{
        payName: '微信支付',
        id: 3
      }
        // {
        // 	payName: '支付宝',
        // 	id: '3'
        // }
      ],
      currentUnmemberPayIndex: null, // 非会员支付方式下标
      payType: 2, // 1-会员支付 0-非会员支付
      orderDiscountInfo: {}, // 获取优惠信息
      payCounts: 0, // 支付是否成功轮询次数
      timer: null,
      filterCurrentPrId: '',
      filterNozList: [], // 被筛选的油枪列表
      filterCurrentnozId: '',
      isShow: false,
      option: {},
      mysNavConfig: {
        /* 占位 背景色 */
        navPadding: true,
        /* 开启单页显示首页图标 */
        isHome: false,
        /* 背景 */
        // bgColor: "#f8f8f8",
        /* 固定导航  */
        navFixed: true,
        /* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
        /* 左侧文字 */
        leftText: {
          text: "",
          color: "",
          fontSize: "48upx", // px upx rpx, // px upx rpx
          fontWeight: "", // 100 - 700
        },
        /* 定义右侧图标 */
        // rightIconPath: "../static/header/collected.png",
      },
      listRadio:'',
      weChatPayRef:'',
      empAccObj: {
        balance: 0,
        companyId: '',
        isChildrenAcc: false,
      }, // 企业子卡余额
    };
  },
  onLoad(option) {
    // console.log('onLoad')
    this.option = option
    this.getFuelStationInfoFn(option)
    this.getPayInfo()
  },
  methods: {
    async getEmpCardCount() {
      const res = await getEmpCard()
      this.memberPayInfo.push({
        paidTypeId: 54,
        paidTypeName: '企业账户付款',
        memberType: 2,
        memberName: '企业子卡',
        accAmt: res.balance || 0,
        disable: res.isChildrenAcc === null || res.isChildrenAcc === false
      })
    },
    onDiscountDetail(){
      this.$refs.discountDetail.open('bottom');
    },
    onVipPayClick(item, index) {
      if (item.memberType && item.accAmt >= this.currentOrder.fuelAmt){
        this.payType = 1
        this.$refs.listRadio[index].select()
        this.currentPayMethodsIndex = index
        this.currentUnmemberPayIndex = null
        this.getOrderDiscountInfo()
      }
    },
    onUnMemberPayClick(item, index) {
      // this.radioUnmemberPayWay();
      this.payType = 0
      this.$refs.weChatPayRef[index].select()
      this.currentPayMethodsIndex = null
      this.currentUnmemberPayIndex = index
      this.getOrderDiscountInfo()
    },
    onRight(){
      console.log('aaa')
    },
    // 获取会员信息里面支付信息
    getPayInfo() {
      createMemberInfo({
        openId: uni.getStorageSync('userOpenId'),
      }).then(async res => {
        console.log(res, 'createMemberInfo')
        if (res && res.memberAccListVos) {
          this.memberPayInfo = res.memberAccListVos
          this.defaultMemberInfo = res.memberVo
          await this.getEmpCardCount()
        } else {
          console.log(res, '错误信息')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取加油站详情
    getFuelStationInfoFn(obj) {
      getFuelStationInfo({
        lng: obj.lng,
        lat: obj.lat,
        // lat: 30.686594,
        // lng: 103.839971,
        stationId: obj.stationId
      }).then(res => {
        if (res) {
          this.stationInfo = res
          this.filterNozList = res.nozList
          // 取92号油价格 92# prId 101
          // const defaultPriceObj = _.find(this.stationInfo.prPriceList, { prId:101 })
          let defaultPriceObj = {}
          this.stationInfo.prPriceList.forEach(item=>{
            if (item.prId === 101)
              defaultPriceObj = item
          })
          this.lowest = defaultPriceObj.price
          this.chooseNoz(defaultPriceObj)
        } else {
          console.log('获取加油站详情ERROR')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 又怕筛选油枪
    filterNoz(obj) {
      console.log(obj);
      this.filterCurrentPrId = obj.prId
      this.filterNozList = this.stationInfo.nozList.filter(item => {
        if (item.prId == obj.prId) {
          return item
        }
      })
    },
    setInputKey() {
      if (!this.MykeywordShow) {
        this.MykeywordShow = true;
      }
    },
    toggle(type) {
      this.$refs.popup.open(type)
    },
    //选择优惠券
    coupon() {
      this.$refs.couponPopup.open('bottom')
    },
    Cancelword() {
      this.MykeywordShow = false;
      this.InputEvent = '';
    },
    goNext(val) {
      console.log(val);
    },
    mykeywordset(datatxt) {
      console.log(datatxt);
      var arr = JSON.parse(datatxt);
      // this.Data[arr.even] = arr.value;
    },
    // 选油枪事件
    chooseNoz(obj) {
      this.filterCurrentnozId = obj.nozId
      if (!this.filterCurrentPrId) this.filterNoz(obj)
      this.currentNozInfo = obj
      this.submitPr()
    },
    close() {
      this.$refs.popup.close()
    },
    submitPr() {
      this.$refs.popup.close()
      // 查询未支付订单列表
      getLastFuelUnpaidOrder({
        stationId: this.stationInfo.stationId,
        nozNo: this.currentNozInfo.nozNo,
        pageSize: 50
      }).then(res => {
        console.log(res, 'orderInfo')
        if (res.length) {
          this.unpaidOrderList = res
          this.currentOrder = this.unpaidOrderList[0] // 默认第一个订单
          this.$refs.unPaidOrderPopup.open('bottom')
        } else {
          this.unpaidOrderList = []
          uni.showModal({
            title: '提示',
            content: '当前油枪没有未支付订单，请重新选油枪',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            }
          })
        }
      })
    },
    // 选择未支付订单
    radioUnPaidOrder: function (evt) {
      console.log(evt, 'evtevt')
      for (let i = 0; i < this.unpaidOrderList.length; i++) {
        if (this.unpaidOrderList[i].orderId == evt.detail.value) {
          this.currentOrderIndex = i
          this.currentOrder = this.unpaidOrderList[i]
          break;
        }
      }
    },
    // 获取订单优惠信息
    getOrderDiscountInfo() {
      // console.log(this.currentOrder, 'currentOrder')
      // console.log(this.payType, 'this.payType')
      // console.log(this.memberPayInfo[this.currentPayMethodsIndex], 'this.memberPayInfo')
      // console.log(this.unmemberPayInfo[this.currentUnmemberPayIndex], 'this.unmemberPayInfo')
      const params = {
        orderId: this.currentOrder.orderId,
        stationId: this.currentOrder.stationId,
        prId: this.currentOrder.prId,
        vol: this.currentOrder.vol,
        price: this.currentOrder.price,
        orderAmt: this.currentOrder.fuelAmt,
        paidTypeId: this.payType === 1 ? 2 : this.unmemberPayInfo[this.currentUnmemberPayIndex].id, // 会员、微信、支付宝
        paidTypeName: this.payType === 1 ? '账户余额' : this.unmemberPayInfo[this.currentUnmemberPayIndex].payName,
        openid: uni.getStorageSync('userOpenId'),
        memberId: this.payType === 1 ? this.memberPayInfo[this.currentPayMethodsIndex].memberId : this.defaultMemberInfo.member.memberId,
        accMemberId: this.payType === 1 ? this.memberPayInfo[this.currentPayMethodsIndex].accMemberId : this.defaultMemberInfo.member.accMemberId,
      }
      getFuelOrderDisc({...params}).then(res => {
        if (res) {
          this.orderDiscountInfo = res
        } else {
          console.log('error')
        }
      })
    },
    // 确认未支付订单获取优惠信息
    confirmOrder() {
      this.$refs.unPaidOrderPopup.close()
      this.isShow = true
      //this.currentOrder.fuelAmt
      let arr = []
      this.memberPayInfo.forEach((item, index) => {
        if (item.accAmt > this.currentOrder.fuelAmt) {
          arr.push(index)
        }
      })
      if (arr.length > 1) {
        this.currentPayMethodsIndex = arr[arr.length - 1]
        this.getOrderDiscountInfo()
        return
      } else if (arr.length == 1) {
        this.currentPayMethodsIndex = 0
        this.getOrderDiscountInfo()
        return
      }
      this.currentPayMethodsIndex = null
      this.currentUnmemberPayIndex = 0
      this.payType = 0
      this.getOrderDiscountInfo()
    },
    // 选择支付类别
    // choosePayType(type) {
    // 	this.payType = type
    // 	this.getOrderDiscountInfo()
    // },
    // 选择会员支付方式
    radioPayWay: function (evt) {
      console.log(evt, '选择会员支付方式')
      this.payType = 1
      for (let i = 0; i < this.memberPayInfo.length; i++) {
        if (this.memberPayInfo[i].memberId == evt.detail.value) {
          this.currentPayMethodsIndex = i;
          this.currentUnmemberPayIndex = null
          this.getOrderDiscountInfo()
          break;
        }
      }
    },
    // 选择非会员支付方式
    radioUnmemberPayWay: function (evt) {
      console.log(evt, '选择非会员支付方式')
      this.payType = 0
      for (let i = 0; i < this.unmemberPayInfo.length; i++) {
        if (this.unmemberPayInfo[i].id == evt.detail.value) {
          this.currentUnmemberPayIndex = i;
          this.currentPayMethodsIndex = null
          this.getOrderDiscountInfo()
          break;
        }
      }
    },
    // 去支付
    nextPaid(time) {
      if (this.payType === 2) {
        uni.showToast({
          title: '请选择支付方式',
          icon:'error'
        })
        return false
      }
      if (this.orderDiscountInfo.realAmt || this.currentOrder.fuelAmt) {
        uni.showLoading({
          title: '支付中...'
        })
        const self = this
        self.orderDiscountInfo.stationName = self.currentOrder.stationName
        const params = {
          stationId: self.currentOrder.stationId,
          paidTypeId: self.payType === 1 ? 2 : self.unmemberPayInfo[self
              .currentUnmemberPayIndex].id, // 会员、微信、支付宝
          paidTypeName: self.payType === 1 ? '账户余额' : self.unmemberPayInfo[self
              .currentUnmemberPayIndex].payName,
          openid: uni.getStorageSync('userOpenId'),
          memberId: self.payType === 1 ? self.memberPayInfo[self.currentPayMethodsIndex]
              .memberId : self.defaultMemberInfo.member.memberId,
          accMemberId: self.payType === 1 ? self.memberPayInfo[self.currentPayMethodsIndex]
              .accMemberId : self.defaultMemberInfo.member.accMemberId,
          payAmt: this.orderDiscountInfo.realAmt || this.currentOrder.fuelAmt,
          reqId: nextSnowflakeId(),
          tradeType: 'NOZ_ORDER', //RECHARGE_ORDER
          sourceOrderId: self.currentOrder.orderId,
          attach: '', //
        }
        if (this.payType === 1){
          const paidTypeId = this.memberPayInfo[this.currentPayMethodsIndex].paidTypeId
          const paidTypeName = this.memberPayInfo[this.currentPayMethodsIndex].paidTypeName
          params.paidTypeId = paidTypeId ? paidTypeId : 2
          params.paidTypeName = paidTypeName ? paidTypeName : '账户余额'
        }
        console.log('----params----', params)
        self.timer = setTimeout(() => {
          if (this, self.payType === 1) {
            miniPay({...params}).then(res => {
              console.log(res, 'payInfo')
              clearTimeout(self.timer)
              uni.hideLoading()
              uni.redirectTo({
                url: '../paid-result/index?orderinfo=' + JSON.stringify(self
                    .orderDiscountInfo)
              })
            }).catch(error => {
              if (error.code == 95555) {
                // 支付中持续查
                self.nextPaid(5000)
              } else {
                console.log(error)
              }
            })
          } else {
            let data = {
              ...params,
              stationId: self.currentOrder.stationId,
              tradeType: 'NOZ_ORDER',
              sourceOrderId: self.currentOrder.orderId,
              payAmt: self.orderDiscountInfo.realAmt || self.currentOrder.fuelAmt
            }
            weChatPay(data).then(res => {
              if (res && res.code === 200) {
                uni.redirectTo({
                  url: '../paid-result/index?orderinfo=' + JSON.stringify(
                      self.orderDiscountInfo)
                })
              }
            })
          }
        }, time)
      }
    },
    gohere(data) {
      if (this.option.lat && this.option.lng) {
        uni.openLocation({
          latitude: data.lat,
          longitude: data.lng,
          name: data.stationName,
          address: data.address
        })
        return
      }
      toast('请先授权获取位置')
    },
    no() {
      uni.hideLoading()
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 40rpx 28rpx 140rpx 28rpx;

  .text-gray{
    color: #6A6A6A;
  }
  .text-red{
    color: #F57546;
  }


  .fuelNo{
    font-size: 36upx;
    font-weight: 700;
  }

  .noz-list {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column-gap: 20upx;
    grid-row-gap: 32upx;

    .item {
      width: 152rpx;
      height: 84upx;
      text-align: center;
      background: #F8F8F9;
      border-radius: 12upx;
      font-size: 24rpx;
      color: #2D2B2A;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .current_item {
      background: #0062410F;
      color: #006241;
      border: 1upx solid #006241;
    }
  }

  .bg-trans{
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #183E31 11.25%, rgba(24, 62, 49, 0.844456) 54.2%, rgba(24, 62, 49, 0.735993) 66.57%, rgba(24, 62, 49, 0.662621) 72.57%, rgba(24, 62, 49, 0.517732) 79.59%, rgba(24, 62, 49, 0.296756) 88.87%, rgba(24, 62, 49, 0) 100%);
    width: 100%;
    height: 520upx;
    z-index: -1;
  }
  .fuel-info {
    padding: 20rpx 20rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    //background-image: url('https://i.postimg.cc/Jhj7qHrF/place-order-bg.png');
    //background-repeat: no-repeat;
    background-size: 100% 100%;

    .station-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-bottom: 20upx;
      border-bottom: 1upx solid #F0F1F2;

      .station-img {
        width: 112upx;
        height: 112upx;
        border-radius: 16upx;
        margin-right: 16upx;
        flex-shrink: 0;
        overflow: hidden;
        image{
          width: 100%;
          height: 100%;
        }
      }

      .title-text {
        .name {
          font-weight: 700;
          font-size: 32upx;
          line-height: 48upx;
          color: #1B1B1B;
        }

        .tags {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;

          .tag {
            margin-top: 8upx;
            margin-right: 8upx;
            background: #FFF8EA;
            padding: 0 16upx;
            line-height: 44upx;
            color: #C99227;
            font-size: 24upx;
          }
        }
      }
    }

    .position-info{
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-top: 20upx;
      .position-r{
        width: 60upx;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .navigateIco{
          width: 48upx;
          height: 48upx;
          background: #006241;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .sub{
          margin-top: 4upx;
          font-size: 24upx;
          color: #6A6A6A;
        }
      }
      .station-distance {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8upx;

        .station-name {
          font-size: 34rpx;
          color: #2D2B2A;
          line-height: 48rpx;
        }

        .distance {
          font-size: 24rpx;
          color: #9D9D9D;
          line-height: 36rpx;
        }
      }
      .road {
        font-size: 28rpx;
        color: #1B1B1B;
        line-height: 36rpx;
      }
    }

    .fuel-base {
      display: flex;
      align-items: center;


      .base-item {
        padding: 4rpx 8rpx;
        background: rgba(71, 139, 255, 0.09);
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        font-size: 24rpx;
        color: #478BFF;
        line-height: 34rpx;
      }
    }
  }
  .price-panle{
    background: #FFFFFF;
    border-radius: 24upx;
    padding: 20upx;
    margin: 20upx 0;

    .vipPirce {
      color: #F57546;

      .num {
        font-weight: 600;
        display: inline-block;
        font-size: 56upx;
      }
    }

    .price {
      font-size: 24upx;
      color: #6A6A6A;
      border-bottom: 1upx solid #F0F1F2;
      padding-bottom: 16upx;
    }

    .fuel-price {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      //margin: 8rpx 0px 0rpx 0rpx;

      .member-price {
        color: #6A6A6A;
        font-size: 24rpx;
        line-height: 40rpx;
        margin-right: 20rpx;
        margin-top: 20upx;
        text {
          font-size: 44rpx;
        }
      }

      .station-price {
        font-size: 26rpx;
        color: #2D2B2A;
        line-height: 36rpx;
        margin-left: 40rpx;
        margin-right: 40rpx;
      }

      .user-price {

        font-size: 26rpx;
        color: #2D2B2A;
        line-height: 36rpx;
      }
    }
  }

  .fuel-pr-price {
    margin-top: 24rpx;

    .main-noz{
      background: #FFFFFF;
      border-radius: 0 0 24upx 24upx;
      padding: 0 20upx 20upx;
    }

    .pr-list {
      padding: 20upx;
      display: flex;
      justify-content: space-between;
      background: #FFFFFF;
      border-radius: 24rpx 24rpx 0rpx 0rpx;

      .roundOilNum{
        border-radius: 66upx;
        border: 1upx solid #F0F1F2;
        width: 132upx;
        height: 60upx;
        line-height: 60upx;
        text-align: center;
        color: #1B1B1B;
        font-size: 36upx;
        display: flex;
        align-items: center;
        justify-content: center;
        .little{
          font-size: 24upx;
          line-height: 60upx;
        }
        image{
          width: 32upx;
          height: 32upx;
        }
      }

      .item:nth-child(1) {
        font-size: 28rpx;
        font-weight: 500;
        color: #2D2B2A;
        line-height: 60rpx;
      }

      .item:nth-child(2) {
        font-size: 28rpx;
        color: #CCCCCC;
        line-height: 40rpx;
        display: flex;
        align-items: center;

        image {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }

    .order-info {
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 28rpx 20rpx;
      margin: 20rpx 0rpx;

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #2D2B2A;
        line-height: 40rpx;
        display: flex;
        align-items: center;
      }

      .br {
        width: 100%;
        //height: 2rpx;
        //background: #F3F5F7;
        margin: 24rpx 0rpx 32rpx 0rpx;
      }

      .meet-price {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .meet {
          font-size: 28rpx;
          color: #939391;
          line-height: 40rpx;
        }

        .price {
          font-size: 28rpx;
          color: #2D2B2A;
          line-height: 40rpx;
        }
      }
      .shouldPay{
        background: #F8F8F9;
        padding: 0 24upx;
        border-radius: 12upx;
        line-height: 108upx;
        color: #1B1B1B;
        font-size: 28upx;
        .totalMoney{
          font-size: 44upx;
          font-weight: 500;
          margin: 0 12upx;
        }
      }
    }

    .payment-method {
      background: #FFFFFF;
      border-radius: 24upx;
      padding: 28rpx 20upx;
      margin-top: 20upx;

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #1B1B1B;
        line-height: 40rpx;
        display: flex;
        align-items: center;

        //view:nth-child(1) {
        //  width: 6rpx;
        //  height: 28rpx;
        //  background: #E56646;
        //  margin-right: 26rpx;
        //}
      }

      .br {
        width: 100%;
        //height: 2rpx;
        //background: #F3F5F7;
        margin: 24rpx 20upx;
      }

      .balance {
        //padding-left: 20rpx;

        .pay_type {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;

          .member_pay,
          .unmember_pay {
            margin-right: 20rpx;
            color: black;
            font-size: 24rpx;
            font-weight: 600;
            text-align: center;
            background-color: #f3f3f3;
            border-radius: 16rpx;
            width: 33.3333%;
            line-height: 60rpx;
          }

          .active_pay {
            background-color: #ffaa00;
            color: #ffffff;
          }
        }

        .balance-title {
          display: flex;
          align-items: center;

          image {
            width: 48rpx;
            height: 48rpx;
          }

          text {
            font-size: 28rpx;
            font-weight: 500;
            color: #2D2B2A;
            line-height: 40rpx;
            margin-left: 18rpx;
          }
        }

        .balance-list {
          padding-left: 64rpx;

          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16rpx;

            .item-name {
              font-size: 28rpx;
              color: #2D2B2A;
              line-height: 40rpx;
              width: 100%;
              display: flex;
              justify-content: space-between;

              text {
                display: inline-block;
                width: 60%;
                text-align: left;
                // display: inline-block;
                // width: 300rpx;
              }
            }
          }

          .item:nth-child(1) {
            margin-top: 28rpx;
          }

          .br {
            //height: 2rpx;
            background: #F3F5F7;
          }
        }

        .wechat-pay {
          display: flex;
          align-items: center;
          justify-content: space-between;
          //padding-right: 20rpx;

          .wechat-pay-title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            image {
              width: 48rpx;
              height: 48rpx;
            }

            text {
              font-size: 28rpx;
              font-weight: 500;
              color: #2D2B2A;
              line-height: 40rpx;
              margin-left: 18rpx;
            }
          }
        }
      }
    }
  }

  .submit {
    box-sizing: border-box;
    width: 100%;
    height: 128rpx;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    border-top: 1rpx #efefef solid;
    justify-content: space-between;
    padding: 0 24upx;
    box-shadow: 0rpx -2rpx 10rpx 0rpx rgba(0, 0, 0, 0.0406);

    .discount{
      font-size: 24upx;
      padding-left: 72upx;
    }

    .price {
      display: flex;
      align-items: center;
      margin-right: 24rpx;

      text:nth-child(1) {
        font-size: 26rpx;
        color: #2D2B2A;
        line-height: 36rpx;
      }

      text:nth-child(2) {
        font-size: 28rpx;
        font-weight: 500;
        color: #006241;
        line-height: 40rpx;
      }
    }

    .button {
      line-height: 80rpx;
      text-align: center;
      background-color: #006241;
      //margin-right: 30rpx;
      width: 200rpx;
      //background: linear-gradient(180deg, #F49F7C 0%, #E56646 100%);
      border-radius: 180rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #FFFFFF;
    }

    .active_next_pay {
      //background-color: #ffaa00;
      color: #ffffff;
    }
  }



  .coupon {
    margin-top: 0upx;
    background: #FFFFFF;
    border-radius: 24upx;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 32rpx 0rpx 32rpx;


      image {
        width: 40rpx;
        height: 40rpx;
      }

      .left {
        font-size: 28rpx;
        font-weight: 500;
        color: #2D2B2A;
        line-height: 40rpx;
        display: flex;
        align-items: center;

        //view:nth-child(1) {
        //  width: 6rpx;
        //  height: 28rpx;
        //  //background: #E56646;
        //  margin-right: 26rpx;
        //}
      }

      .right {
        font-size: 28rpx;
        font-weight: 500;
        //color: #2D2B2A;
        line-height: 40rpx;
        margin-left: 8upx;
      }
    }

    .br {
      width: 100%;
      //height: 2rpx;
      //background: #F3F5F7;
      margin: 24rpx 0rpx 32rpx 0rpx;
    }

    .coupon-price-list {
      padding: 0px 32rpx 32rpx 32rpx;

      .coupon-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .name {
          font-size: 28rpx;
          color: #939391;
          line-height: 40rpx;
        }

        .price {
          font-size: 28rpx;
          color: #2D2B2A;
          line-height: 40rpx;
        }
      }

      .coupon-price:nth-last-child(1) {
        margin-bottom: 0px;
      }
    }
  }

  .popup-content {
    //background: #FFFFFF;
    border-radius: 24upx 24upx 0 0 !important;

    .title {
      padding: 32rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #2D2B2A;
      line-height: 44rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .br {
      width: 100%;
      height: 2rpx;
      background: #F3F5F7;
      // margin: 32rpx 0rpx 40rpx 0rpx;
    }

    .item-title {
      padding: 0rpx 30rpx;
      font-size: 28rpx;
      color: #2D2B2A;
      line-height: 40rpx;
      margin: 40rpx 0rpx 20rpx 0px;
    }

    .pr-list {
      padding: 0rpx 30rpx;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-column-gap: 20upx;
      grid-row-gap: 20upx;
      justify-content: space-between;

      // flex-wrap: wrap;
      .item {
        width: 152rpx;
        line-height: 84rpx;
        text-align: center;
        background: #F3F5F7;
        border-radius: 12upx;
        font-size: 28rpx;
        color: #2D2B2A;
      }

      .current_item {
        background: #0062410F;
        color: #006241;
        border: 1upx solid #006241;
      }
    }

    // .pr-list:after {
    // 	/* uniapp应使用 &:afte */
    // 	content: "";
    // 	width: 214rpx;
    // }

    .noz {
      padding: 0rpx 30rpx;

      //.noz-list {
      //  //display: flex;
      //  //flex-wrap: wrap;
      //  //justify-content: space-between;
      //  //align-content: flex-start;
      //  width: 100%;
      //  height: 100%;
      //  overflow-y: auto;
      //  display: grid;
      //  grid-template-columns: repeat(4, minmax(0, 1fr));
      //  grid-column-gap: 20upx;
      //  grid-row-gap: 20upx;
      //
      //  .item {
      //    width: 152rpx;
      //    line-height: 84rpx;
      //    text-align: center;
      //    margin-bottom: 20rpx;
      //    background: #F8F8F9;
      //    border-radius: 8rpx 8rpx 8rpx 8rpx;
      //    font-size: 28rpx;
      //    color: #2D2B2A;
      //  }
      //
      //  .current_item {
      //    background: #0062410F;
      //    color: #006241;
      //    border: 1upx solid #006241;
      //  }
      //
      //  // .item:nth-last-child(1) {
      //  // 	margin-bottom: 0px;
      //  // }
      //}

      .noz-list:after {
        /* uniapp应使用 &:afte */
        content: "";
        width: 214rpx;
      }

      .pr-submit {
        margin-top: 32rpx;
        margin-bottom: 68rpx;
        line-height: 96rpx;
        background: #478BFF;
        text-align: center;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }

  .order-content {
    overflow: hidden;
    border-radius: 24upx;
    .title {
      background: #FFFFFF;
      padding: 32rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #2D2B2A;
      line-height: 44rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .order-list {
      padding: 0 32rpx 32rpx;
      //background: #F3F5F7;
      overflow-y: auto;

      .uni-list-cell {
        // padding-top: 30rpx;
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        //padding: 24rpx 32rpx;
        //border: 1rpx solid #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;

        .fuel-order-info {
          .info {
            font-size: 28rpx;
            font-weight: 500;
            color: #2D2B2A;
            line-height: 40rpx;
          }

          .date {
            margin-top: 4rpx;
            font-size: 26rpx;
            color: #939391;
            line-height: 36rpx;
          }
        }
      }

      .active {
        //border: 1rpx solid #478BFF;
      }

      .confirm_pay {
        width: 100%;
        margin: auto;
        line-height: 80rpx;
        font-size: 28rpx;
        color: white;
        text-align: center;
        background: #006241;
        border-radius: 60upx;
      }
    }
  }

  .coupon-content {

    .title {
      background: #FFFFFF;
      padding: 32rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #2D2B2A;
      line-height: 44rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .coupon-list {
      background: #F3F5F7;
      padding: 0rpx 30rpx 24rpx 30rpx;

      .no-coupon {
        padding: 34rpx 0rpx;

        text {
          font-size: 28rpx;
          color: #2D2B2A;
          line-height: 40rpx;
        }
      }

      .list {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        background: #FFFFFF;
        padding: 32rpx 32rpx 32rpx 24rpx;
        margin-bottom: 24rpx;

        .coupon-left {
          width: 45%;

          .price {
            font-size: 32rpx;
            font-weight: 500;
            color: #E56646;
            line-height: 44rpx;

            text {
              font-size: 44rpx;
            }
          }

          .interval {
            font-size: 24rpx;
            color: #2D2B2A;
            line-height: 34rpx;
          }
        }

        .br {
          width: 4rpx;
          height: 136rpx;
          background: #F3F5F7;
          margin-left: 22rpx;
          margin-right: 32rpx;
        }

        .uni-list-cell {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;

          .coupon-info {
            .name {
              font-size: 32rpx;
              font-weight: 500;
              color: #2D2B2A;
              line-height: 44rpx;
            }

            .date {
              font-size: 24rpx;
              color: #666260;
              line-height: 34rpx;
              margin-top: 8rpx;
              margin-bottom: 16rpx;
            }

            .memo {
              font-size: 24rpx;
              color: #939391;
              line-height: 34rpx;
            }
          }
        }

      }

      .confirm_coupon {
        width: 100%;
        margin: auto;
        line-height: 96rpx;
        font-size: 36rpx;
        color: white;
        text-align: center;
        background: #478BFF;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
      }
    }
  }
}
</style>